<template>
  <el-button :size="size" :type="type" :plain="plain" :round="round" :circle="circle" :loading="loading" :disabled="disabled" :class="{'btn-disabled':disabled}" :autofocus="autofocus" @click="handleClickEvent(btnObj.btnEvent, record, otherObj)">
    <slot>
      <div style="display: flex;justify-content: center;align-items: center;">
        <svg-icon v-if="btnObj.iconName" :icon-class="btnObj.iconName" style="font-size:14px" />
        <span v-if="autoTitle" v-html="autoTitle"></span>
        <span v-else v-html="btnObj.btnTitle"></span>
      </div>
    </slot>
  </el-button>
  <!-- 高法人事定制要加不同按钮颜色 -->
  <!-- <span>
  <el-button v-if="btnObj.btnTitle=='新建'||btnObj.btnTitle=='新增'" style="background-color:rgba(64,149,229,0.1);color:#4095e5;border:none;" :size="size" :type="type" :plain="plain" :round="round" :circle="circle" :loading="loading" :disabled="disabled" :autofocus="autofocus" @click="handleClickEvent(btnObj.btnEvent, record, otherObj)">
    <slot><span class="el-icon-plus"></span><span class="icon_text">{{ btnObj.btnTitle }}</span></slot>
  </el-button>
  <el-button v-else-if="btnObj.btnTitle=='删除'" style="background-color:rgba(222,134,143,0.1);color:#de868f;border:none;" :size="size" :type="type" :plain="plain" :round="round" :circle="circle" :loading="loading" :disabled="disabled" :autofocus="autofocus" @click="handleClickEvent(btnObj.btnEvent, record, otherObj)">
    <slot><span class="el-icon-delete"></span><span class="icon_text">{{ btnObj.btnTitle }}</span></slot>
  </el-button>

  <el-button v-else-if="btnObj.btnTitle=='修改'" style="background-color:rgba(141,186,75,0.1);color:#8dba4b;border:none;" :size="size" :type="type" :plain="plain" :round="round" :circle="circle" :loading="loading" :disabled="disabled" :autofocus="autofocus" @click="handleClickEvent(btnObj.btnEvent, record, otherObj)">
    <slot><span class="el-icon-edit"></span><span class="icon_text">{{ btnObj.btnTitle }}</span></slot>
  </el-button>

  <el-button v-else-if="btnObj.btnTitle=='导出报表'" style="background-color:rgba(203,164,63,0.1);color:#cba43f;border:none;" :size="size" :type="type" :plain="plain" :round="round" :circle="circle" :loading="loading" :disabled="disabled" :autofocus="autofocus" @click="handleClickEvent(btnObj.btnEvent, record, otherObj)">
    <slot><span class="el-icon-upload2"></span><span class="icon_text">{{ btnObj.btnTitle }}</span></slot>
  </el-button>

  <el-button v-else-if="btnObj.btnTitle=='下载模板'" style="background-color:rgba(141,186,75,0.1);color:#8dba4b;border:none;" :size="size" :type="type" :plain="plain" :round="round" :circle="circle" :loading="loading" :disabled="disabled" :autofocus="autofocus" @click="handleClickEvent(btnObj.btnEvent, record, otherObj)">
    <slot><span class="el-icon-download"></span><span class="icon_text">{{ btnObj.btnTitle }}</span></slot>
  </el-button>
  <el-button v-else style="background-color:rgba(64,149,229,0.1);color:#4095e5;border:none;" :size="size" :type="type" :plain="plain" :round="round" :circle="circle" :loading="loading" :disabled="disabled" :autofocus="autofocus" @click="handleClickEvent(btnObj.btnEvent, record, otherObj)">
    <slot>{{ btnObj.btnTitle }}</slot>
  </el-button>
</span> -->

</template>

<script>
// import { clickEvent } from "../event/eventClick";
export default {
  name: "HCButton",
  data()
  {
    return {};
  },
  props: {
    btnObj: {
      type: Object,
      default: () =>
      {
        return {};
      },
    },
    otherObj: {
      type: [Object, Function],
    },
    record: {
      type: [Array, Object, Function],
    },
    size: {
      type: String,
    },
    type: {
      type: String,
      default: "primary",
    },
    plain: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Boolean,
      default: false,
    },
    circle: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    autofocus: {
      type: Boolean,
      default: false,
    },
    autoTitle:{
      type: [String,Object,Boolean],
      default: "",
    }
  },
  // 跨层级调用父组件方法
  inject: {
    // 解决非fs进入视图报错的问题
    fsback: { value: "fsback", default:null }
  },
  methods: {
    clickEvent,
    //按钮点击
    handleClickEvent(P_BtnEvent, P_Record, P_otherObj)
    {
      console.log(P_BtnEvent, P_Record, P_otherObj)
      if (this.btnObj.checkedNumberBeforeClick)
      {
        if (P_Record.constructor === Array)
        {
          if (P_Record.length < this.btnObj.checkedNumberBeforeClick)
          {

            this.$message.warning("请至少勾选" + this.btnObj.checkedNumberBeforeClick + "项");
            return
          }
        }
      }
      if (window.HC_config.VUE_APP_FSANDFORM && this.btnObj.btnName == 'back')
      {
        if (this.btnObj.btnEvent.eventType == 'LINK_EVENT' || this.btnObj.btnEvent.eventType == 'EXECUTE_EVENT')
        {
          if(this.fsback)
          {
             this.fsback()
          }
          else
          {
               clickEvent(P_BtnEvent, P_Record, P_otherObj);
          }
        }
      }
      else
      {
        clickEvent(P_BtnEvent, P_Record, P_otherObj);
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.el-button--text {
  margin-left: 10px;
  padding: 10px 12px;
  &:first-child {
    margin-left: 0;
  }
}
/*.el-button {
  margin-left: 10px;
  padding: 10px 12px;
  &:first-child {
    margin-left: 0;
  }
}*/
.icon_text {
  margin-left: 10px;
}

.btn-disabled {
  background-color: #c0c4cc!important;
  cursor: default!important;
  border-color:#c0c4cc!important;
}
</style>

